<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>七牛from</title>

<script src="${base}/js/jquery-1.7.js"></script>
<script src="${base}/js/jquery-form.js"></script>

<script type="text/javascript">
//方式3
function upload(){
    $("#ajaxForm").ajaxSubmit(function (data) {
    	if (typeof(data.error) != "undefined") { 
    		 alert(data.error); 
    	}else{
    	  	 alert("上传成功: "+JSON.stringify(data));
    	  	 var fileKey = data.key;
    	  	 saveFileKey(fileKey);
    	} 
    });
    return false;
}

function saveFileKey(fileKey){
	$.ajax({
	    url:'${base}/music/save',
	    type:'POST', //GET
	    contentType:'application/x-www-form-urlencoded',
	    async:false,    //或false,是否异步
	    data:{
	        filekey: fileKey,
	        title: $("#title").val() ,
	        author: $("#author").val() ,
	        style: $("#style").val() 
	    },
	    timeout:5000,    //超时时间
	    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
	    beforeSend:function(xhr){
	        console.log(xhr)
	        console.log('发送前')
	    },
	    success:function(data,textStatus,jqXHR){
	        console.log(data)
	        window.location.reload();
	    }
	})
}
</script>

</head>
<body>

<form id="ajaxForm" method="post" action="http://up-z2.qiniup.com/"  enctype="multipart/form-data">
  <input name="key" type="hidden" value="${file_key}">
  
  <input name="token" type="hidden" value="${upload_token}">
  
歌曲名称:  <input name="title" id="title" type="text" >  <br/>
  
作者:  <input name="author" id="author" type="text" > <br/>
  
风格:
<select name="style" id="style" >
  <option value ="HAPPY">漫步</option>
  <option value="LOVE">求爱</option>
  <option value ="CHILD">儿歌</option>
  <option value="SAD">伤感</option>
  <option value="SILENCE">安静</option>
  <option value="OLD">老歌</option>
</select>  <br/>

文件: <input name="file" type="file" />
  
  <input type="button" id="btnButton" onclick="upload()"  value="上传文件" />
</form>


<!-- http://<domain>/<key> -->
<a href="${base}/index">回到首页</a>
</body>
</html>